<template>
  <div class="login-container">
    <div class="logo" />
    <div class="form">
      <div class="card">
        <h1>登录</h1>
        <el-card shadow="never" class="login-card">
          <!--登录表单-->
          <el-form ref="ruleForm" :model="loginForm" :rules="loginRules">
            <el-form-item prop="mobile">
              <el-input v-model="loginForm.mobile" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
            </el-form-item>
            <el-form-item prop="isOk">
              <el-checkbox v-model="loginForm.isOk">用户平台使用协议</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%;" type="primary" size="default" @click="onClickLogin">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: '13800000002',
        password: 'hm#qd@23!',
        isOk: false
      },
      loginRules: {
        mobile: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          pattern: /^1[34578]\d{9}$/,
          message: '目前只支持中国大陆的手机号码',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur' },
        {
          min: 5,
          max: 11,
          message: '密码需要5-11位',
          trigger: 'blur'
        }],
        isOk: [{
          validator: (rule, value, callback) => value ? callback() : callback(new Error('需要勾选公户平台使用协议')),
          message: '需要勾选公户平台使用协议',
          trigger: 'change' }]
      }
    }
  },
  methods: {
    async onClickLogin() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // 触发vuex登录函数-动作完成后再跳转主页
          await this.$store.dispatch('user/login', this.loginForm)
          // 跳转到主页
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style lang="scss">
.login-container {
  height: 100vh;
  align-items: stretch;
  display: flex;
  .logo {
    flex: 3;
    background: url('../../assets/common/login_back.png') no-repeat center / cover;
    border-top-right-radius: 60px;
  }
  .form {
    flex: 2;
    position: relative;
    .card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 370px;
    }
  }
}
</style>
